<template>

    <div>
        <el-button type="danger" :icon="Plus" style="float: left;;margin-left: 10px;"
            @click="result">新增</el-button>&emsp;
        <el-button type="danger" :icon="Check" style="float: left;;margin-left: 10px;"
            @click="save()">保存</el-button>&emsp;
        <el-button type="danger" :icon="Back" style="float: left;;margin-left: 10px;"
            @click="delDomain()">撤销</el-button>&emsp;
        <el-button type="danger" :icon="Delete" style="float: left;;margin-left: 10px;"
            @click="DeleteLoge()">删除</el-button>
    </div>
    <br />
    <div>
        <span style="font-weight: bold;"> 采购员: </span>&emsp;
        <el-select v-model="form.Buyer" placeholder="-- --" style="width: 240px">
            <el-option label="罗翔" :value="1" />
            <el-option label="扬家霖" :value="2" />
            <el-option label="雷鑫" :value="3" />
            <el-option label="王单青" :value="4" />
            <el-option label="温暖暖" :value="5" />
            <el-option label="杨杰" :value="6" />
            <el-option label="赵丽" :value="7" />
            <el-option label="黄强" :value="8" />
        </el-select>
        <span style="font-weight: bold;"> 采购日期:</span>&emsp;
        <el-date-picker v-model="form.PurchaseDate" type="date" style="width: 200px;border: none;"
            placeholder="日期" />&emsp;&emsp;
        <span style="font-weight: bold;"> 羊只类型: </span>&emsp;
        <el-select v-model="form.SheepCategory" placeholder="-- --" style="width: 240px">
            <el-option label="公" :value="1" />
            <el-option label="母" :value="2" />
        </el-select>
        <br>
        <span style="font-weight: bold;"> 类别: </span>&emsp;
        <el-input style="width: 200px;" v-model="form.Category" placeholder="-- --" />
        <span style="font-weight: bold;"> 核算单元: </span>&emsp;
        <el-select v-model="form.AccountingUnit" placeholder="-- --" style="width: 240px">
            <el-option label="默认" :value="0" />
        </el-select>
        <span style="font-weight: bold;"> 供应商: </span>&emsp;
        <el-select v-model="form.Supplier" placeholder="-- --" style="width: 240px">
            <el-option label="默认" :value="0" />
        </el-select>
        <br>
        <span style="font-weight: bold;"> 摘要: </span>&emsp;
        <el-input style="width: 200px;" v-model="form.Abstract" placeholder="-- --" />
        <span style="font-weight: bold;"> 单据号: </span>&emsp;
        <el-input style="width: 200px;" v-model="form.DocumentNo" placeholder="-- --" />
        <span style="font-weight: bold;"> 流水号: </span>&emsp;
        {{ form.SerialNo }}l
    </div>
    <br />
    <hr style="font-size: 20px;" />
    <br />

    <div class="table-container" style=" height: 400px;position: relative;">
        <table style="border-collapse: collapse;">
            <tr>
                <td>序号</td>
                <td>耳号</td>
                <td>栋舍</td>
                <td>存入栏位</td>
                <td>性别</td>
                <td>商品名称</td>
                <td>标包</td>
                <td>计量单位</td>
                <td>入库数量</td>
                <td>只均单价（元）</td>
                <td>金额（元）</td>
                <td>单位折扣</td>
                <td>调整金额</td>
                <td>结算金额</td>
                <td>总重量（公斤）</td>
            </tr>
            <tr v-for="(ruleForm, index) in loge.healthArray">
                <td>{{ index + 1 }}</td>
                <td>
                    <el-input style="width: 100px" v-model="ruleForm.earId"></el-input>
                </td>
                <td>
                    <el-select style="width: 100px" v-model="ruleForm.transferBuild" placeholder="请选择">
                        <el-option v-for="item in Recordcottage" :label="item.cottageName" :value="item.cottagesId"
                            @click="getFields2(ruleForm.transferBuild, index)" />
                    </el-select>
                </td>
                <td>
                    <el-select style="width: 100px" v-model="ruleForm.transferPenId" placeholder="请选择">
                        <el-option v-for="item in Fields2[index]" :label="item.fieIdName" :value="item.fieIdId" />
                    </el-select>
                </td>
                <td>
                    <el-select style="width: 100px" v-model="ruleForm.gender" placeholder="请选择">
                        <el-option label="公" :value="1" />
                        <el-option label="母" :value="2" />
                    </el-select>
                </td>
                <td>
                    <el-input style="width: 100px" v-model="ruleForm.productName"></el-input>
                </td>
                <td>
                    <el-input style="width: 100px" v-model="ruleForm.standardPackage"></el-input>
                </td>
                <td>
                    <el-select v-model="ruleForm.measurementUnit" style="width: 240px">
                        <el-option label="只" value="只" />
                        <el-option label="批" value="批" />
                    </el-select>
                </td>
                <td>
                    <el-input style="width: 100px" v-model="ruleForm.inventoryQuantity"></el-input>
                </td>
                <td>
                    <el-input style="width: 100px" v-model="ruleForm.averagePrice"></el-input>
                </td>
                <td>
                    <el-input style="width: 100px" v-model="ruleForm.AmountMoney"></el-input>
                </td>
                <td>
                    <el-input style="width: 100px" v-model="ruleForm.UnitDiscount"></el-input>
                </td>
                <td>
                    <el-input style="width: 100px" v-model="ruleForm.AdjustAmount"></el-input>
                </td>
                <td>
                    <el-input style="width: 100px" v-model="ruleForm.SettlementAmount"></el-input>
                </td>
                <td>
                    <el-input style="width: 100px" v-model="ruleForm.TotalWeight"></el-input>
                </td>
            </tr>
        </table>

    </div>
    <div style="bottom: 0; left: 0;width: 100%;;">
        <hr>
        <!-- <span>&emsp; 合计</span>
            <hr> -->
        <el-button link type="danger" :icon="Plus" style="float: left;;margin-left: 10px;"
            @click="addDomain">增行</el-button>&emsp;
        <el-button link type="danger" :icon="Check" style="float: left;;margin-left: 10px;"
            @click="delDomain">删行</el-button>&emsp;
        <br />
        <hr>
        <span style="vertical-align: top;width: 5%;">&emsp; 备注</span>&emsp;
        <el-input v-model="form.Message" type="textarea" style="width: 85%;" />
    </div>


</template>
<script lang="ts" setup>
import {
    Check,
    Delete,
    Plus,
    Back,
} from '@element-plus/icons-vue'
import { reactive, ref, onMounted } from 'vue';
import axios from 'axios';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import type { ComponentSize, FormInstance, FormRules } from 'element-plus';
//调用持久化
import { useCounterStore } from '@/stores/counter';
const counterStore = useCounterStore();
const route = useRoute();
const router = useRouter();


//钩子函数
onMounted(() => {
    getParturitionDifficulty()//分娩难易度
    getFatSheepBatch()//羔羊批次
    geteweData()//耳号
    getRecordcottage()//栋舍
    getserialNumber()//流水号
})
const loge = reactive({
    healthArray: <any>[],
});

//增行
const addDomain = () => {
    loge.healthArray.push(
        reactive({
            "createId": counterStore.employeeId,
            "createTime": new Date(),
            updateId: null,
            updateTime: null,
            deleteId: null,
            deletes: false,
            deleteTime: null,
            examId: null,
            examTime: null,
            "procId": 0,
            "buyer": form.Buyer,
            "purchaseDate": form.PurchaseDate,
            "sheepCategory": form.SheepCategory,
            "category": "",
            "accountingUnit": 0,
            "supplier": form.Supplier,
            "warehouse": form.Warehouse,
            "abstract": form.Abstract,
            "documentNumber": form.DocumentNo,
            "serialNumber": form.SerialNo.toString(),
            "earId": 0,
            "transferBuild": 0,
            "transferField": 0,
            "gender": 0,
            "productName": "",
            "standardPackage": "",
            "measurementUnit": "",
            "inventoryQuantity": 0,
            "averagePrice": 0,
            "amountMoney": 0,
            "unitDiscount": 0,
            "adjustAmount": 0,
            "settlementAmount": 0,
            "totalWeight": 0,
            "remarks": form.Message

        }));
    console.log(loge.healthArray);
};

//新增 
const result = () => {
    loge.healthArray = []
    addDomain();
}
const DeleteLoge = () => {
    loge.healthArray = []
}
//减行撤销
const delDomain = () => {
    loge.healthArray.splice(loge.healthArray.length - 1, 1)
}
//获取羊只信息
const form = reactive({
    Buyer: "",//采购员
    PurchaseDate: '',//采购日期
    SheepCategory: '',//羊只类型
    Category: '',//类别
    AccountingUnit: '',//核算单元
    Supplier: '',//供应商
    Warehouse: '',//仓库
    Abstract: '',//摘要 
    Message: '',//备注
    DocumentNo: '',
    SerialNo: '',
})
//获取羊只信息
const updates = reactive({
    EweID: '',
    Gender: '',
    CurrentBarn: '',
    CurrentPen: '',
})
//#region 
/*------------下拉框------------*/
//获取分娩难易度
const ParturitionDifficulty = ref<any>([]);
const getParturitionDifficulty = () => {
    axios.get('http://localhost:5039/api/ProductionManagement/ParturitionDifficultyList').then(res => {
        ParturitionDifficulty.value = res.data.data;
    })
}
//获取肥羊品种
const FatSheepBatch = ref<any>([]);
const getFatSheepBatch = () => {
    axios.get('http://localhost:5039/api/ProductionManagement/FatSheepBatchList').then(res => {
        FatSheepBatch.value = res.data.data;
    })
}

//获取耳号
const eweData = ref<any>([]);
const geteweData = () => {
    axios.get('http://localhost:5039/api/SleepBegin/SelectEarFeMale').then(res => {
        eweData.value = res.data.data;
    })
}
//获取栋舍
const Recordcottage = ref<any>([]);
const getRecordcottage = () => {
    axios.post('http://localhost:5039/api/Cottages/CottageList', {
    }).then(res => {
        Recordcottage.value = res.data.data;
    })
}

//获取栏位
const Fields2 = ref<any>([]);

const getFields2 = (id: number, index: any) => {
    console.log(id)
    Fields2.value[index] = [];
    axios.post('http://localhost:5039/api/Cottages/SearchFields', {
        "cottagesId": id,
        "pageIndex": 1,
        "pageSize": 100000000
    }).then(res => {
        Fields2.value[index] = res.data.data
        loge.healthArray[index].TransferPen = '';
        console.log(Fields2.value);
    })
}


/*------------流水号------------*/
const getserialNumber = () => {
    axios.post('http://localhost:5039/api/ProductionManagement/GetId', {}).then(res => {
        form.SerialNo = res.data;
    })
}





//#region 保存
const save = () => {
    let obj = {
        proc: loge.healthArray
    }
    axios.post('http://localhost:5039/api/Sales_Purchases/PersonalProcurementCreate', obj).then(res => {
        if (res.data.code == 0) {
            console.log('保存成功');
            router.push('/Descendants_transferList')
        }
    })
}


//#endregion


</script>



<style scoped>
.demo-pagination-block+.demo-pagination-block {
    margin-top: 10px;
}

.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}

/* 设置第一行的 td 顶部边框加粗并设置为红色 */
table tr:first-child td {
    border-top: 3px solid red;
    /* 设置顶部边框为3px宽度的红色 */
    padding: 10px;
    text-align: center;
}

/* 设置 td 的样式 */

table td {
    padding: 10px;
    border: 1px solid #ccc;
    text-align: center;
    font-size: 14px;
    height: 60px;
    width: 150px;
    white-space: nowrap;
    /* 防止内容换行 */
}

/* 可选：为 table 添加样式 */
table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}



/*______________________________________________________*/

.table-container {
    max-width: 100%;
    overflow-x: auto;
    /* 启用水平滚动 */
    margin: 20px 0;
    /* 设置容器的外边距 */
}
</style>